import React, { Component } from 'react';
import Swiper from 'react-native-swiper';
import { AppRegistry, Text, TextInput, View ,FlatList,TouchableOpacity,Image,Dimensions,ScrollView,TouchableHighlight} from 'react-native';
var {height, width} = Dimensions.get('window');
import ScrollableTabView,{DefaultTabBar,ScrollableTabBar}  from 'react-native-scrollable-tab-view';
export default class Cangpinguan extends Component {
  constructor(props) {
    super(props);
    navigation = props.navigation; 
    this.state = {
        dataSource:[
            {'id':1,'name':"营造之道",'shidai':"常设",'zuozhe':"故宫·学术",'jianjie':"办“故宫藏传佛教文物精品展”一期（2011年）、二期（2013年），受到业内外人士的普遍好评"},
            {'id':2,'name':"营造之道",'shidai':"原状",'zuozhe':"故宫·学术",'jianjie':"办“故宫藏传佛教文物精品展”一期（2011年）、二期（2013年），受到业内外人士的普遍好评"},
            {'id':3,'name':"营造之道",'shidai':"赴外",'zuozhe':"故宫·学术",'jianjie':"办“故宫藏传佛教文物精品展”一期（2011年）、二期（2013年），受到业内外人士的普遍好评"},
            {'id':4,'name':"营造之道",'shidai':"常设",'zuozhe':"故宫·学术",'jianjie':"办“故宫藏传佛教文物精品展”一期（2011年）、二期（2013年），受到业内外人士的普遍好评"},
        ],
        tabs:1,

    };
  }
    static navigationOptions=({navigation}) => ({
        headerTitle: '学术详情',
        headerTitleStyle:{
            alignSelf:'center',
            // width:width
        },
        headerTintColor:'burlywood',
        
      });
      _keyExtractor = (item, index) => item.id;
      _renderItem({item,index}){//近期展览子列表
        const { navigate } = this.props.navigation;
          return(
            <TouchableOpacity onPress={() => navigate('ProfileD')} activeOpacity={0.3} style={{width:width*0.3,paddingLeft:width*0.05}}>
            <View style={{width:width*0.3,height:width*0.4,flex: 1,textAlign:'center'}}>
                <View style={{flexDirection:'column',}}>
                <Image style={{width:width*0.3,height:width*0.3}} source={require("./img/day1.png")}></Image>
                <Text style={{fontWeight:'',width:width*0.3,textAlign:'center',fontSize:10}}> {item.name}</Text>
                </View>
            </View>
            </TouchableOpacity>
          )
      };
      _renderItem1({item,index}){//其余展览子列表
        const { navigate } = this.props.navigation;
          return(
            <TouchableOpacity onPress={() => navigate('ProfileD')} activeOpacity={0.3} style={{width:width*0.5,paddingLeft:width*0.05}}>
            <View style={{width:width*0.4,height:width*0.55,flex: 1,textAlign:'center'}}>
                <View style={{flexDirection:'column',}}>
                <Image style={{width:width*0.4,height:width*0.4}} source={require("./img/day1.png")}></Image>
                <Text style={{fontWeight:'',width:width*0.4,textAlign:'center'}}> {item.name}</Text>
                </View>
            </View>
            </TouchableOpacity>
          )
      };
render() {
  const { navigate } = this.props.navigation;
        return (
        <ScrollableTabView
        style={{flex:1,}}
        tabBarPosition='top'//tabBarPosition默认top  位于屏幕顶部   bottom位于屏幕底部  overlayTop悬浮在顶部
        initialPage={0} //初始化时被选中的Tab下标，默认是0
        locked={false}//表示手指是否能拖动视图  默认false  true则不能拖动,只可点击
        renderTabBar={() => <DefaultTabBar />}
        tabBarUnderlineStyle={{backgroundColor: 'black',height:1}}//设置DefaultTabBar和ScrollableTabBarTab选中时下方横线的颜色
        tabBarBackgroundColor='#FFFFFF'//设置整个Tab这一栏的背景颜色
        tabBarActiveTextColor='black'//设置选中Tab的文字颜色
        tabBarInactiveTextColor='#CCCCCC'//设置未选中Tab的文字颜色
        tabBarTextStyle={{fontSize: 14,fontWeight:'',paddingTop:8,}}//设置Tab文字的样式
        onChangeTab={(obj) => {//Tab切换之后会触发此方法
          console.log('index:' + obj.i);
        }}
        onScroll={(postion) => {  //视图正在滑动的时候触发此方法
          // float类型 [0, tab数量-1]
          console.log('scroll position:' + postion);
        }}
    >
        <View tabLabel='故宫出版' style={{backgroundColor:'white'}}>
            <FlatList 
            data={this.state.dataSource}
            numColumns={2}
            keyExtractor={this._keyExtractor}
            renderItem={this._renderItem1.bind(this)}
            style={{marginTop:10}}>
            </FlatList>
        </View>
        <View tabLabel='文创商品'>
            <FlatList 
            data={this.state.dataSource}
            numColumns={2}
            keyExtractor={this._keyExtractor}
            renderItem={this._renderItem1.bind(this)}
            style={{marginTop:20,}}
            />
            
        </View>
        <View tabLabel='故宫壁纸'>
            <FlatList 
            data={this.state.dataSource}
            numColumns={2}
            keyExtractor={this._keyExtractor}
            renderItem={this._renderItem1.bind(this)}
            style={{marginTop:20,}}>
            </FlatList>
        </View>
        <View tabLabel='故宫APP'>
            <FlatList 
            data={this.state.dataSource}
            numColumns={3}
            keyExtractor={this._keyExtractor}
            renderItem={this._renderItem.bind(this)}
            style={{marginTop:20,paddingLeft:width*0.03}}>
            </FlatList>
        </View>
        <View tabLabel='故宫游戏'>
        <FlatList 
        data={this.state.dataSource}
        numColumns={2}
        keyExtractor={this._keyExtractor}
        renderItem={this._renderItem1.bind(this)}
        style={{marginTop:20,}}>
        </FlatList>
    </View>
    </ScrollableTabView>

         )
  
       
     }
}
